<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用 layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./common.js"></script>
    <script src="./layui/layui.js"></script>
    <script src="./utils.js"></script>
</head>

<body>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="button">立即提交</button>
            </div>
        </div>
    </form>
    <script>
        /*
           1.请求地址：url
           2.请求方式：method
           3.是否异步：async
           4.带给后端的数据：data
           5.请求头信息: headers
           6.是否解析响应体：dataType
           7.成功以后的函数：success
       */
        document.querySelector('button').onclick = function () {
            // 获取表单的手机号与密码
            let mobile = document.querySelector('input[name="title"]').value;
            let password = document.querySelector('input[name="password"]').value;
            // 获取到是否需要记住密码
            let isRemember = document.querySelector('input[name="switch"]').checked;
            ajax({
                url: 'http://phpclub.org.cn/edu/server/login.php',
                method: 'POST',
                data: { mobile, password },
                dataType: 'json',
                success: res => {
                    if (res.code != 100)
                        layer.msg(res.msg, { icon: 5 })
                    else {
                        let time = 0;
                        time = 7 * 24 * 3600
                        if (isRemember)
                            setCookie('userInfo', JSON.stringify(res.data), time)
                        setCookie('activeInfo', JSON.stringify(res.data))
                        location.href = 'home.html'
                    }
                }
            })
        }
    </script>
</body>

</html>